<template>
  <div class="radioCollection">
    <v-header title="全景秀" :fixed="true" ref="headerHeight"></v-header>
    <scroll
      ref="scroll"
      :style="{paddingTop: paddingTop + 'px'}">


      <div v-if="panoramaList.length > 0" v-for="item in panoramaList" :key="item.id" class="radioModular" v-lazy:background-image="item.panoramaThumb">
        <img @click="viewPanorama(item)" class="play-icon" :src="viewImg">

        <p class="panorama-name">{{item.name}}</p>
      </div>

      <not-data v-else></not-data>

      <div :style="{height: height + 'px'}"></div>
    </scroll>
  </div>
</template>

<script type='text/ecmascript-6'>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import { isIphoneX, isIOS } from '@/assets/js/brower'
import myTop from '@/assets/img/myhome/my_top.png'
import { Grid, GridItem } from 'vux'
import viewImg from '@/assets/img/view.png'
import axios from '@/api/axiosApi'
import { QINIU_PREFIX } from '@/api/config'

import notData from '@/components/not-data/not-data.vue'

export default {
  data () {
    return {
      viewImg,
      paddingTop: 0,
      height: 0,
      myTop,
      panoramaList: []
    }
  },
  components: {
    VHeader,
    Scroll,
    Grid,
    GridItem,
    notData
  },
  created () {
    if (isIphoneX()) {
      this.paddingTop = 74
      this.height = 120
    } else {
      this.paddingTop = 60
      this.height = 100
    }
    this._getPanoramaList()
  },
  methods: {
    // 获取视频数据
    _getPanoramaList () {
      if (this.$route.params.type === '0') {
        axios.get(this, '/v1/panorama', null, (data) => {
          data.forEach(item => {
            if (item.thumbUrl && item.thumbUrl.indexOf(QINIU_PREFIX)) {
              item.thumbUrl += '-panorama'
            }
          })
          this.panoramaList = data
        })
      } else {
        axios.get(this, `/v1/panorama?areaId=${this.$route.query.areaId}`, {}, (data) => {
          this.panoramaList = data
        })
      }
    },
    viewPanorama(panorama) {
      if (isIOS()) {
        window.webkit.messageHandlers.NativeMethod.postMessage({'methodName': 'showVRPanorama', 'panoramaUrl': panorama.panorama, 'scenicTitle': panorama.name})
      } else {
        window.android.showVRPanorama(panorama.panorama, panorama.name)
      }
    }
  },
  mounted () {
    this.$refs.scroll.$el.style.height = (window.innerHeight - this.paddingTop) + 'px'
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable'
  .radioCollection {
    position fixed
    top 0
    right 0
    bottom 0
    left 0
    z-index 500
    background #ffffff
    padding 0 15px
    .radioModular {
      box-shadow 0 1px 6px rgba(0,0,0,0.2)
      border 1px solid rgba(0,0,0,0.2)
      margin-top 20px
      width 100%
      height 190px
      background-repeat no-repeat
      background-size cover
      background-position center
      position relative
    }
    .play-icon {
      width 64px
      height 64px
      position absolute
      left: 50%
      top: 50%
      margin-left -32px
      margin-top -52px
    }
    .panorama-name {
      position absolute
      bottom 0
      left 0
      right 0
      height 40px
      line-height 40px
      padding 0 9px
      background rgba(0, 0, 0, 0.5)
      color #fff
    }
  }
</style>

<style lang='stylus' rel='stylesheet/stylus'>
</style>
